
<!DOCTYPE html>
<html lang="zh-CN" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试 - 考试管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<!-- 导航栏，与个人信息页面相同，此处省略 -->

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <!-- 侧边栏，与个人信息页面相同，此处省略 -->
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="card-title">可用考试列表</h5>
                    <div>
                        <span class="badge bg-info">共 ${examList.size()} 场考试</span>
                    </div>
                </div>
                <div class="card-body">
                    <c:if test="${empty examList}">
                        <div class="text-center py-5">
                            <img src="https://via.placeholder.com/150" alt="暂无考试" class="img-fluid mb-3">
                            <p class="text-muted">当前没有可用的考试</p>
                        </div>
                    </c:if>

                    <c:if test="${not empty examList}">
                        <table class="table table-striped table-hover">
                            <thead>
                            <tr>
                                <th>考试名称</th>
                                <th>课程名称</th>
                                <th>考试时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${examList}" var="exam">
                                <tr>
                                    <td>${exam.examName}</td>
                                    <td>${exam.courseName}</td>
                                    <td>${exam.startTime} 至 ${exam.endTime}</td>
                                    <td>
                                        <c:if test="${exam.activeStatus == 1 && exam.startTime <= now && exam.endTime >= now}">
                                            <span class="badge bg-success">进行中</span>
                                        </c:if>
                                        <c:if test="${exam.activeStatus == 1 && exam.startTime > now}">
                                            <span class="badge bg-warning">未开始</span>
                                        </c:if>
                                        <c:if test="${exam.activeStatus == 1 && exam.endTime < now}">
                                            <span class="badge bg-secondary">已结束</span>
                                        </c:if>
                                        <c:if test="${exam.activeStatus == 0}">
                                            <span class="badge bg-dark">未激活</span>
                                        </c:if>
                                    </td>
                                    <td>
                                        <c:if test="${exam.activeStatus == 1 && exam.startTime <= now && exam.endTime >= now}">
                                            <a href="exam?action=take&examId=${exam.examId}" class="btn btn-primary btn-sm">参加考试</a>
                                        </c:if>
                                        <c:if test="${exam.activeStatus == 1 && exam.endTime < now}">
                                            <a href="score?action=detail&examId=${exam.examId}" class="btn btn-info btn-sm">查看成绩</a>
                                        </c:if>
                                        <c:if test="${exam.activeStatus == 0 || exam.startTime > now}">
                                            <button class="btn btn-gray btn-sm" disabled>暂不可用</button>
                                        </c:if>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                        <!-- 分页导航 -->
                        <nav aria-label="Page navigation">
                            <ul class="pagination justify-content-center">
                                <li class="page-item <c:if test="${pageNum == 1}">disabled</c:if>">
                    <a class="page-link" href="exam?action=list&pageNum=${pageNum-1}" aria-label="上一页">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    <c:forEach begin="1" end="${totalPages}" var="i">
                        <li class="page-item <c:if test="${pageNum == i}">active</c:if>">
                        <a class="page-link" href="exam?action=list&pageNum=${i}">${i}</a>
                        </li>
                    </c:forEach>
                    <li class="page-item <c:if test="${pageNum == totalPages}">disabled</c:if>">
                    <a class="page-link" href="exam?action=list&pageNum=${pageNum+1}" aria-label="下一页">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    </li>
                    </ul>
                    </nav>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>